import request from "../../utils/request"
import moment from "moment"
import PubSub from "pubsub-js";

const app = getApp();  // 获取全局唯一的小程序实例

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 播放状态
    musicId: "", // 音乐的id
    song: "", // 音乐详情
    durationTime: "00:00", // 音乐总时间
    musicLink: "", // 音乐地址
    currentTime: "00:00", // 音乐播放实时的时间
    currentWidth: 0  // 进度条实时长度
  },

  // 封装方法： 全局保存音乐的id和音乐的播放状态
  changeMusicStatus(isPlay) {
    this.setData({
      isPlay
    })
    app.globalData.musicStatus = isPlay
  },

  // 获取音乐详情数据
  async getSongDetails(ids) {
    // 请求音乐数据
    const result = await request("/song/detail", { ids })

    this.setData({
      song: result.songs[0] // 保存音乐数据
    })

    // 修改导航栏标题
    wx.setNavigationBarTitle({
      title: this.data.song.name
    })

    // 计算音乐总时间
    const durationTime = moment(this.data.song.dt).format("mm:ss")

    this.setData({
      durationTime // 保存音乐总时间
    })

  },

  // 切换播放状态
  cutPlay() {
    let isPlay = !this.data.isPlay
    this.setData({
      isPlay
    })
    const { musicId, musicLink } = this.data
    this.controlMusic(musicId, isPlay, musicLink) // 控制音乐的播放与暂停
  },

  // 控制音乐的播放与暂停 --- 音乐的地址
  async controlMusic(id, isPlay, musicLink) {
    // 判断音乐是否播放
    if (!isPlay) {
      this.backgroundAudioManager.pause() // 音乐暂停
      return
    }

    // 判断音乐播放地址是否存在
    if (!musicLink) {
      // 获取音乐播放地址
      const result = await request("/song/url", { id })
      musicLink = result.data[0].url
      // 保存音乐播放的地址
      this.setData({
        musicLink
      })
    }

    // 再次判断音乐播放的地址是否真实存在-- 部分音乐需要版权可能无法获取
    if (!musicLink) {
      // 提示用户
      wx.wx.showToast({
        title: '请充钱',
        icon: 'error',
      });
      return
    }

    this.backgroundAudioManager.src = musicLink // 播放音乐
    this.backgroundAudioManager.title = this.data.song.name // 设置音乐标题-- 必填
  },

  // 上一首, 下一首切换音乐
  cutMusic(event) {
    PubSub.subscribe("musicId", (msg, musicId) => {
      this.setData({
        musicId: musicId.toString()
      })

      this.getSongDetails(this.data.musicId)
      this.controlMusic(this.data.musicId, true)
      PubSub.unsubscribe("musicId")
    })

    const type = event.currentTarget.id
    PubSub.publish("switchMusic", type)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let musicId = options.musicId // 拿到音乐的id
    this.setData({
      musicId // 保存音乐的id
    })
    this.getSongDetails(this.data.musicId) // 获取音乐的数据详情
    this.backgroundAudioManager = wx.getBackgroundAudioManager() // 获取音频管理对象

    // 判断点击的音乐的id与全局保存的音乐的id是否是同一首歌曲， 并判断音乐的播放状态
    if (app.globalData.musicStatus && app.globalData.musicId.toString() === this.data.musicId.toString()) {
      this.setData({
        isPlay: true
      })
    }

    // 监听背景音频播放事件
    this.backgroundAudioManager.onPlay(() => {
      this.changeMusicStatus(true)
      app.globalData.musicId = this.data.musicId
    })

    // 监听背景音频暂停事件
    this.backgroundAudioManager.onPause(() => {
      this.changeMusicStatus(false)
    })

    // 监听背景音频停止事件
    this.backgroundAudioManager.onStop(() => {
      this.changeMusicStatus(false)
    })

    // 监听背景音频播放进度更新事件
    this.backgroundAudioManager.onTimeUpdate(() => {
      // 计算音乐播放的实时时间
      const currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format("mm:ss")
      // 计算实时进度条的长度
      const currentWidth = this.backgroundAudioManager.currentTime * 450 / this.backgroundAudioManager.duration

      this.setData({
        currentTime,
        currentWidth
      })
    })

    // 监听背景音频自然播放结束事件
    this.backgroundAudioManager.onEnded(() => {
      this.setData({
        currentTime: "00:00",
        currentWidth: 0
      })

      this.cutMusic({
        currentTarget: {
          id: "next"
        }
      })
    })


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})